<template>
    <div class="common">
        <!-- 步骤 -->
        <div class="step_dis common_style">
            <el-steps :space="300" :active="1" :align-center="true" :center="true">
                <el-step title="选择认证类型" description="" process-status="success"></el-step>
                <el-step title="填写资料" description=""></el-step>
                <el-step title="关联属性( 选填 )" description=""></el-step>
                <el-step title="提交成功，后台审核" description=""></el-step>
            </el-steps>
        </div>
        <!-- 企业资料 -->
        <div class="common_style">
            <el-form :model="form" :rules="rules" ref="form" label-width="140px" label-height="129px">
                <heading grade="1">企业资料</heading>
                <el-form-item label="企业全称："
                              prop="contact"
                              :rules="[
               { required: true, message: '请输入企业全称'},
             ]">
                    <el-input class="normal-input" :maxlength="16" placeholder="企业机构全称不能重名"></el-input>
                </el-form-item>
                <heading grade="1">上传企业基本资料</heading>
                <el-form-item label="组织机构代码证："
                              prop="logoUrl"
                              :rules="[
               { required: true, message: '请上传组织机构代码证'},
             ]">
                    <el-row>
                        <el-upload
                                class="avatar-uploader fl"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handleLogSuccess"
                                :before-upload="beforeLogoUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-row>
                    <span class="tip">组织机构代码证必需在有效期内。<br>若办理过三证合一的企业无法提供组织机构代码证，则请上传最新的法人证书</span>
                </el-form-item>
                <el-form-item label="企业公司营业执照事业单位法人证书："
                              prop="APPImg"
                              :rules="[
               { required: true, message: '请上传事业单位法人证书'},
             ]">
                    <el-row>
                        <el-upload
                                class="avatar-uploader fl"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handleAppSuccess"
                                :before-upload="beforeAppUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-row>
                    <span class="tip">事业单位法人证书必需在有效期内。<br>若属于事业单位媒体需要上传《事业单位法人证书》，如非事业单位则需上传《营业执照》</span>
                </el-form-item>
                <el-form-item label="其他证明材料："
                              prop="PCImg"
                              :rules="[
               { required: true, message: '请上传其他证明材料'},
             ]">
                    <el-row>
                        <el-upload
                                class="avatar-uploader fl"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handlePCSuccess"
                                :before-upload="beforePCUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-row>
                    <span class="tip">非事业单位的医疗机构，请上传《医疗机构执业许可证》</span>
                </el-form-item>
            </el-form>
        </div>
        <!-- 运营 、上传 -->
        <div class="common_style">
            <el-form :model="form" :rules="rules" ref="form" label-width="125px">
                <heading grade="1">运营者资料</heading>
                <el-form-item label="个人姓名："
                              prop="contact"
                              :rules="[
             { required: true, message: '请输入个人姓名'},
           ]">
                    <el-input :maxlength="500" placeholder="请输入真是姓名(与身份证上的名称一致)"></el-input>
                </el-form-item>
                <el-form-item label="手机号码："
                              prop="contact"
                              :rules="[
             { required: true, message: '请输入手机号码'},
           ]">
                    <el-input :maxlength="500" placeholder="请输入手机号码；若已绑定手机号，则显示已绑定手机号，可修改"></el-input>
                </el-form-item>
                <el-form-item label="联系邮箱："
                              prop="contact"
                              :rules="[
             { required: true, message: '请输入电子邮箱'},
           ]">
                    <el-input :maxlength="500" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
                <heading grade="1">上传资料</heading>
                <el-form-item label="手持身份证：(正面照)"
                              prop="logoUrl"
                              :rules="[
             { required: true, message: '请上传身份证'},
           ]">
                    <el-row>
                        <el-upload
                                class="avatar-uploader fl"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handleLogSuccess"
                                :before-upload="beforeLogoUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <el-upload
                                class="avatar-uploader fl"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handlePCSuccess"
                                :before-upload="beforePCUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-row>
                    <p class="tip">请上传清晰的中华人民共和国居民身份证照片或扫描件，无居民身份证的内地居民可提交《临时居民身份证》。外国居民，请上传《外国人居留证》或《外国人临时居留证》</p>
                </el-form-item>
                <el-form-item label="其他证明材料：(选填)"
                              prop="PCImg"
                              :rules="[
             { required: false, message: '请上传其他证明材料'},
           ]">
                    <el-row>
                        <el-upload
                                class="avatar-uploader fl"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handlePCSuccess"
                                :before-upload="beforePCUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-row>
                </el-form-item>
                <el-button class="add-btn" type="primary">确认</el-button>
                <el-button class="back-btn">返回</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
  export default{}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .common {
        background-color: #EBF0F6;
    }

    div {
        background-color: #fff;
    }

    .step_dis {
        height: 200px;
    }

    .common_style {
        margin-bottom: 20px;
        padding: 60px
    }

    label {
        margin-left: 84px;
        padding-right: 30px;
    }

    .fl {
        float: left;
    }

    .heading-1:nth-child(1) {
        margin-top: 0
    }

    .heading-1 {
        font-weight: 700;
        margin-bottom: 40px;
        margin-top: 60px
    }

    .normal-input {
        width: 290px;
    }

    .tip {
        display: inline-block;
        color: #999;
        font-size: 12px;
        white-space: normal;
        width: 480px;
        line-height: 20px;
        margin-top: 5px
    }

    // 上传图片的css
    .avatar-uploader {
        border: 1px dashed #d9d9d9;
        margin-top: 8px;
        margin-right: 20px;
    }

    .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 20px;
        color: #8c939d;
        width: 160px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        background-color: #F8F6F7;
    }

    .avatar {
        width: 160px;
        height: 90px;
        display: block;
    }

    .add-btn {
        margin-left: 132px;
        width: 110px
    }

    .back-btn {
        width: 110px
    }
</style>
